import { GetRolesItem } from "@/api";
import { Form, FormInstance, Input, Modal, Select } from "antd";
import { type ReactNode, type FC, memo } from "react";

interface IProps {
  children?: ReactNode;
  setAssignOpen: (open: boolean) => void;
  assignOpen: boolean;
  onCancel: () => void;
  onOk: () => void;
  form: FormInstance;
  rolesList: GetRolesItem[];
  setRid: (rid: number) => void;
}

const ModalAssign: FC<IProps> = memo(
  ({ setAssignOpen, assignOpen, onOk, form, rolesList, setRid }) => {
    return (
      <div>
        <Modal
          title="分配角色"
          centered
          open={assignOpen}
          onCancel={() => setAssignOpen(false)}
          onOk={onOk}
        >
          <Form form={form} labelCol={{ span: 4 }} wrapperCol={{ span: 20 }}>
            <Form.Item label="当前的用户" name="username">
              <Input disabled />
            </Form.Item>

            <Form.Item label="当前的角色" name="role_name">
              <Input disabled />
            </Form.Item>

            <Form.Item label="分配新角色">
              <Select
                placeholder="请选择角色"
                style={{ width: "100%" }}
                onChange={(value) => {
                  setRid(value);
                }}
              >
                {rolesList.map((item: GetRolesItem) => (
                  <Select.Option key={item.id} value={item.id}>
                    {item.roleName}
                  </Select.Option>
                ))}
              </Select>
            </Form.Item>
          </Form>
        </Modal>
      </div>
    );
  }
);

export default ModalAssign;
